<template>
	<view>
		<view class="padding30rpx">
			<view class="margin-top25rpx pushl dis" style="margin-bottom: 20rpx;">
				<view class="tecn">
					<view>{{ dakaInfo.clockInNo || 0}}</view>
					<view>缺卡次数</view>
				</view>
				<view class="tecn">
					<view>{{dakaInfo.clockInYes || 0}}</view>
					<view>打卡总天数</view>
				</view>
				<view class="tecn">
					<view>{{dakaInfo.continuityCard || 0}}</view>
					<view>连续打卡</view>
				</view>
			</view>
			<ren-calendar ref='ren' :markDays='markDays' :open="true" :disabledAfter='true' @onDayClick='onDayClick'>
			</ren-calendar>
			<view class="text">每个手机号每日只能登录打卡一次</view>
			<u-button v-if='!status' :custom-style="customStyle" :hair-line='false' @click="enter">今日打卡</u-button>
			<u-button :plain="true" :hair-line='true' v-if="status" :custom-style="customStyleNone" @click="enter">今日已打卡
			</u-button>
			<!-- <view class="change" @click="enter" v-if="!status">今日打卡</view> -->
			<!-- <view class="change" v-if="status == 0" v-else>今日已打卡</view> -->
		</view>
		<view class="line"></view>
		<view class="padding30rpx">
			<view class="hui66" style="font-size: 20rpx;">
				打卡规则：
			</view>


			<view class="hui66 margin-top25rpx" style="font-size: 20rpx;">
				1.每个手机号每日限登录打卡1次，每日登录打卡可以获得1学习币奖励；连续打卡21天，可以或者平台一次性额外奖励10学习币。<br><br>
				2.平台会员可进行学习打卡，每个手机号每日可进行多次学习打卡，完成一期课程学即可进行当期课程学习打卡，每次学习打卡可获得2学习币奖励。
			</view>
		</view>
		<u-popup v-model="show" mode='center'>
			<!-- <view>出淤泥而不染，濯清涟而不妖</view> -->
			<view class="" style="width: 340px;height: 1100rpx;">
				<canvas style="width: 100%;height: 85%;" canvas-id="test" id="test"></canvas>

				<!-- #ifdef H5 -->
				<view class="mdx-center-sm">
					<u-button :custom-style="customStyle" shape="circle" :hair-line='false' @click="preview">预览图片
					</u-button>
				</view>
				<!-- #endif -->
				<!-- #ifndef H5 -->
				<view class="mdx-center-sm">
					<u-button :custom-style="customStyle" shape="circle" :hair-line='false' @click="save">保存图片
					</u-button>
				</view>
				<!-- #endif -->
			</view>

		</u-popup>

	</view>
</template>

<script>
	import Canvas from "@/common/canvas/canvas";
	import RenCalendar from '@/components/ren-calendar/ren-calendar.vue'
	const {
		windowWidth
	} = uni.getSystemInfoSync();
	export default {
		components: {
			RenCalendar
		},
		data() {
			return {
				customStyle: {
					marginTop: '20px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					color: '#fff',
					background: '#00A29A'
				},
				customStyleNone: {
					background: '#D5FFFD',
					color: '#00A29A',
					border: '1rpx soild #00A29A'
				},
				curDate: '',
				markDays: [],
				y: new Date().getFullYear(), // 年
				m: new Date().getMonth() + 1, // 月
				h: new Date().getDate(),
				show: false,
				months: '',

				continuityCard: "",
				status: true,
				dakaInfo: [],

				img1: '',
				img2: '',
				img3: '',
				num: windowWidth,
				userInfo: [],
				dataInfo: []
			}
		},
		onLoad() {
			this.userInfo = this.$store.state['userinfo'];
			this.selectLoginClockIn()
			this.$http.get('app/UserController/slectOnePoster').then(res => {
				this.dataInfo = res.data;
				uni.getImageInfo({
					src: res.data.imgurl,
					success: (e) => {
						this.img1 = e.path
					}
				})
				uni.getImageInfo({
					src: res.data.qrcode,
					success: (e) => {
						this.img2 = e.path
					}
				})
				uni.getImageInfo({
					src: this.userInfo.headimg,
					success: (e) => {
						console.log(e);
						this.img3 = e.path
						console.log(this.img1);
					}
				})
			})


		},
		mounted() {
			this.cvs = new Canvas("test", this);
		},
		onReady() {
			// let today = this.$refs.ren.getToday().date;
			console.log('today', today)
			this.curDate = today;
			this.markDays.push(today);
			console.log('today', this.markDays)
		},
		methods: {
			createImg() {
				console.log(this.img1);
				this.cvs
					.div({
						x: 10,
						y: 10,
						height: 450,
						width: 320,
						radius: 5,
						backgroundColor: "#fff",
						
					})

					.image({
						x: 17,
						y: 20,
						height: 350,
						width: 300,
						radius: 5,
						url: this.img1,
						height: 350,
						width: 305,
					})
					.image({
						x: 17,
						y: 390,
						height: 60,
						width: 60,
						radius: 30,
						url: this.img3
					})
					.text({
						x: 90,
						y: 395,
						fontSize: 15,
						width: 150,
						text: this.userInfo.likename || ''
					})
					.text({
						x: 90,
						y: 415,
						width: 170,
						overflow: "ellipsis",
						lineClamp: 2,
						text: `我要把你揉进我怀里 把你做进我梦里 然后靠一个吻 缝补这距离 捱过无能为力的年纪 我一定要拥有你 是我最亲爱的你 给你一整首情诗 关于你温暖名字 在每个孑然的深夜为你诵读 字句真诚而坚固 星辰也为你祝福 一想你 `
					})
					.image({
						x: 260,
						y: 390,
						height: 60,
						width: 60,
						url: this.img2
					})
					.draw();
				this.show = true
			},
			preview() {
				this.cvs.previewImage();
			},
			save() {
				this.cvs.saveImage().then(e=>{
					console.log(e);
				});
			},

			//获取打卡记录
			selectLoginClockIn() {
				uni.request({
					method: 'GET',
					url: this.$api + '/app/UserController/selectLoginClockIn',
					data: {
						months: this.months
					},
					header: {
						'token': uni.getStorageSync('token')
					},
					success: (res) => {
						console.log('打卡记录', res.data.data)
						if (res.data.code == 200) {
							this.dakaInfo = res.data.data;
							this.$refs.ren.xuanran(res.data.data)
							this.status = res.data.data.todayYESNo
							console.log(res.data.data.todayYESNo);
						} else {

						}
					}
				})
			},
			formatNum(num) {
				let res = Number(num);
				return res < 10 ? '0' + res : res;
			},
			onDayClick(data) {
				this.curDate = data.date;
				console.log('dsa', data)
			},

			// 登录打卡
			enter() {
				uni.request({
					method: 'GET',
					url: this.$api + '/app/UserController/addUserClockIn',
					data: {},
					header: {
						'token': uni.getStorageSync('token')
					},
					success: (res) => {
						console.log(res.data)
						if (res.data.code == 200) {
							this.selectLoginClockIn()
							console.log('登录打卡成功')
							this.createImg();
							uni.showToast({
								icon: 'success',
								title: '打卡成功！'
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.message
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.text {
		text-align: center;
		font-size: 20rpx;
		color: #999999;
		margin-top: 100rpx;
		margin-bottom: 20rpx;
	}

	.tecn {
		text-align: center;
		color: #FFFFFF;
		width: 33.3%;
		border-right: 1rpx solid #efefef;
	}

	.tecn:last-child {
		border-right: none;
	}

	.pushl {
		background-color: #00A29A;
		border-radius: 10rpx;
		padding: 25rpx;
	}

	.tb {
		border-bottom: 3rpx solid #00A29A;
		// width: 100rpx;
		padding-bottom: 15rpx;
	}

	.punch {
		padding: 0 20%;
	}

	.change {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
		height: 100rpx;
		color: #ffffff;
		background-color: #00a29a;
		border-radius: 10rpx;
	}
</style>
